import React from 'react'

import '@/assets/css/coupon.css'

import { SwiperRef } from 'antd-mobile/es/components/swiper'
const Coupon = () => {

    const back = () => {
        React.navigate(-1)
    }

    const swiperRef = React.useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = React.useState(0)
    var [list, SetList] = React.useState([])

    const tabItems = [
        { key: 0, title: '全部' },
        { key: 1, title: '未使用' },
        { key: 2, title: '已使用' },
        { key: 3, title: '已过期' }
    ]

    // console.log(tabItems)

    // console.log(activeIndex)

    React.useEffect(() => {
        CouponList(0)
    }, [])


    const CouponList = async (typeid: any) => {
        // console.log(typeid)
        var data = {
            status: typeid,
            busid: React.Business.id
        }

        var result = await React.HTTP.post('/coupon/couponlist', data)

        if (result.code == 1) {
            SetList(result.data)
        } else {
            React.error(result.msg, () => { })
            return false
        }

    }
    

    const ChangeCoupon = (key: any) => {
        const index = tabItems.findIndex(item => item.key == key)
        setActiveIndex(index)
        swiperRef.current?.swipeTo(index)
        SetList([])
        CouponList(key)
    }

    const Item = list.map((item: any, key) => {
        return (
            <div className="coupon_list" key={key}>
                <div className="coupon_item">
                    <div className="item_content">
                        <a href="coupon-info.html">
                            <div className="left">
                                {item.coupon.rate * 10}<span>折</span>
                            </div>
                            <div className="right">
                                <div>{item.coupon.title}</div>
                                <div>每人限领1张</div>
                                <div>领取后至{item.coupon.endtime_text}有效</div>
                            </div>
                        </a>
                    </div>
                    <div className="item_btn">
                        {
                            item.status == 2 ? 
                            <React.UI.Button disabled size='mini' color='primary'>
                            已使用
                            </React.UI.Button> : 
                            item.status == 1 ? 
                            <React.UI.Button size='mini' color='primary'>
                            去使用
                            </React.UI.Button> : 
                            <React.UI.Button disabled size='mini' color='primary'>
                            已过期
                            </React.UI.Button>
                        }
                        
                    </div>
                </div>
            </div>
        )
    })


    return (
        <>
            <React.UI.NavBar back='返回' onBack={back}>
                我的优惠券
            </React.UI.NavBar>


            <React.UI.Tabs
                activeKey={tabItems[activeIndex].key}
                onChange={ChangeCoupon}
            >
                {tabItems.map(item => (
                    <React.UI.Tabs.Tab title={item.title} key={item.key} />
                ))}
            </React.UI.Tabs>

            <React.UI.Swiper
                direction='horizontal'
                loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={(index: any) => {
                    setActiveIndex(index)
                }}
            >
                <React.UI.Swiper.Item>
                    {Item}
                </React.UI.Swiper.Item>
                

            </React.UI.Swiper>


        </>
    )
}


export default Coupon;